<template>
	<view>
		<view class="wrap">
			<swiper-item class="swiper-item">
				<scroll-view scroll-y style="height: 100%;width: 100%;">
					<view class="page-box">
						<view class="order" v-for="(res, index) in salesGoodsAfterList" :key="res._id">
							<view class="item" v-for="(item, index) in res.goodsInOrder" :key="index">
								<view class="left">
									<image :src="item.indexUrl" mode="aspectFill"></image>
								</view>
								<view class="content">
									<view class="title u-line-2">{{ item.shopName }}</view>
									<view class="type">{{ item.shopDetails }}</view>

								</view>
								<view class="right">
									<view class="price">
										￥{{ item.price }}
									</view>
									<view class="number">x{{ item.num }}</view>
								</view>
							</view>
							<view class="total">
								共{{ totalNum(res.goodsInOrder) }}件商品 合计:
								<text class="total-price">
									￥{{ res.totalFee }}
								</text>
							</view>
							<view class="bottom">
								<view class="status">{{res.backgoods?'已退货':'...'}}</view>
								<view class="logistics btn">退款</view>
								<view class="exchange btn" @click="backGoods(res.tradeNo)">退货</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				salesGoodsAfterList: []
			};
		},
		onLoad() {
			this.getSalesGoodsAfterList()
		},
		methods: {
			getSalesGoodsAfterList() {
				const username = uni.getStorageSync('username');
				uniCloud.callFunction({
					name: "getSalesGoods",
					data: {
						username: username
					}
				}).then(res => {
					// console.log(res);
					this.salesGoodsAfterList = res.result.data
				})
			},
			// 总件数
			totalNum(item) {
				let num = 0;
				item.map(val => {
					num += val.num;
				});
				return num;
			},
			//退货
			backGoods(tradeNo) {
				let _this = this
				uni.showModal({
					title: '提示',
					content: "确定退货吗?",
					success: function(res) {
						if (res.confirm) {
							console.log(tradeNo);
							uniCloud.callFunction({
								name: 'back-goods',
								data: {
									tradeNo: tradeNo
								}
							}).then(res => {
								_this.getSalesGoodsAfterList()
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

				// const username = uni.getStorageSync('username')
				// const db = uniCloud.database();
				// const collection = db.collection('order').where({
				// 	username: username,
				// 	payStatus: 1
				// }).update({
				// 	backgoods: 1
				// })
				// this.$u.toast('退货成功')
				// this.getSalesGoodsAfterList()

			}


		}
	};
</script>

<style>
	/* #ifndef H5 */
	page {
		height: 100%;
		background-color: #f2f2f2;
	}

	/* #endif */
</style>

<style lang="scss" scoped>
	.order {
		width: 710rpx;
		background-color: #ffffff;
		margin: 20rpx auto;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 20rpx;
		font-size: 28rpx;

		// .top {
		// 	display: flex;
		// 	justify-content: space-between;

		// 	.left {
		// 		display: flex;
		// 		align-items: center;

		// 		.store {
		// 			margin: 0 10rpx;
		// 			font-size: 32rpx;
		// 			font-weight: bold;
		// 		}
		// 	}


		// }

		.item {
			display: flex;
			margin: 20rpx 0 0;

			.left {
				margin-right: 20rpx;

				image {
					width: 200rpx;
					height: 200rpx;
					border-radius: 10rpx;
				}
			}

			.content {
				width: 380rpx;

				.title {
					font-size: 28rpx;
					line-height: 50rpx;
				}

				.type {
					margin: 10rpx 0;
					font-size: 24rpx;
					color: $u-tips-color;
				}



			}

			.right {
				margin-left: 10rpx;
				padding-top: 20rpx;
				text-align: right;
				color: $u-type-warning-dark;

				.decimal {
					font-size: 24rpx;
					margin-top: 4rpx;
				}

				.number {
					color: $u-tips-color;
					font-size: 24rpx;
				}
			}
		}

		.total {
			margin-top: 20rpx;
			text-align: right;
			font-size: 24rpx;

			.total-price {
				font-size: 32rpx;
				color: $u-type-warning-dark;
			}
		}

		.bottom {
			display: flex;
			margin-top: 40rpx;
			padding: 0 10rpx;
			justify-content: space-between;
			align-items: center;

			.btn {
				line-height: 52rpx;
				width: 160rpx;
				border-radius: 26rpx;
				border: 2rpx solid #5098ff;
				font-size: 26rpx;
				text-align: center;
				color: #5098ff;
			}

		}
	}

	.wrap {
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--window-top));
		width: 100%;
	}

	.swiper-item {
		height: 100%;
	}
</style>
